<template>
    <div>
        <el-main class="order-content cashier-border">
            <el-row :gutter="3" style="padding-bottom:10px;border-bottom:1px solid #EBEEF5">
                <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="1"><div class="grid-content bg-purple">
                    <el-button :type="isNum == true?'primary':''" round @click="fetchNum()">取号</el-button>
                </div></el-col>
                <el-col :xs="3" :sm="3" :md="3" :lg="2" :xl="1"><div class="grid-content bg-purple">
                    <el-button :type="isNum == false?'primary':''" round @click="cryNum()">叫号</el-button>
                </div></el-col>
            </el-row>

            <!--取号-->
            <el-row :gutter="6" v-if="isNum == true">
                <el-row>
                    <el-col :span="12" style="padding:0px 30px 10px 30px;border-right:1px solid #EBEEF5"><div class="grid-content bg-purple">
                        <div class="table-type">
                            <table class="table" style="width: 32rem;">
                                <tr v-for="item in tableTypes">
                                    <td width="80"><img src="../../assets/imgs/ia_100000824.png" class="news-face"/></td>
                                    <td>
                                        <div>{{item.name}}</div>
                                        <div>1-{{item.diners}}人</div>
                                    </td>
                                    <td>
                                        <span style="color: red">{{item.arrangings.length == 0?0:item.arrangings.length}}</span>
                                        桌等待
                                    </td>
                                    <td>
                                        <span>
                                            {{item.arrangings.length == 0?item.waitTime:item.arrangings.length*item.waitTime}}
                                        </span>
                                        分钟
                                    </td>
                                    <td>
                                        <el-radio v-model="test" :label="item" class="wj-radio">
                                        </el-radio>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <p style="float: left"><span style="color: #E6A23C;">温馨</span>提示</p>
                            <el-col :span="24">
                                <el-card shadow="never" id="hint" style="background: rgba(116,101,228,0.2);margin-right: 0px;margin-left: 0px" >
                                    <ul style="list-style-type: decimal;font-size:15px">
                                        <li>请顾客不要远离叫号等候区</li>
                                        <li>叫号有效期为3分钟，若3分钟内客户无回应，系统自动过号，当前号作废</li>
                                        <li>叫号后请客户到前台，由服务员引导就座</li>
                                    </ul>
                                </el-card>
                            </el-col>
                        </div>
                    </div></el-col>
                    <el-col :span="12" style="padding:30px 30px"><div class="grid-content bg-purple-light">
                        <div >
                            <div style="margin-bottom: 100px" >
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="16"><div class="grid-content bg-purple" style="font-size: 20px; font-weight: bold">
                                        <span>当前时间：<span></span>{{time}}</span>
                                    </div></el-col>
                                    <el-col :span="8"><div class="grid-content bg-purple">
                                        <span style="color: #999">休业时间：</span><span>{{operation.closedTime}}</span>
                                    </div></el-col>
                                </el-row>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>所在门店：</span>
                                    </div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">
                                        <span>{{operation.stores}}</span>
                                    </div></el-col>
                                </el-row>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>当前操作人：</span>
                                    </div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">
                                        {{operation.people}}
                                    </div></el-col>
                                </el-row>
                            </div>
                            <div>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>当前排号：</span>
                                    </div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">
                                        <span style="font-size: 160%;color: #feab2d;" v-if="test.arrangings.length == 0">0</span>
                                        <span style="font-size: 160%;color: #feab2d;" v-if="test.arrangings.length != 0">{{test.arrangings[0].id}}</span>
                                        号
                                    </div></el-col>
                                </el-row>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>等候桌数：</span>
                                    </div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">
                                        <span style="font-size: 160%;color: #feab2d;">{{test.arrangings.length}}</span>
                                        <span>桌</span>
                                    </div></el-col>
                                </el-row>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>预计等待：</span>
                                    </div></el-col>
                                    <el-col :span="4"><div class="grid-content bg-purple">
                                        <span>{{test.arrangings.length*test.waitTime}}</span>
                                        <span>分钟</span>
                                    </div></el-col>
                                </el-row>
                            </div>
                        </div>
                        <div style="padding-top:10px;border-top:1px solid #EBEEF5">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                <el-row :gutter="20">
                                    <el-col :span="10"><div class="grid-content bg-purple">
                                        <el-form-item label="手机号" prop="phoneNum">
                                            <el-input v-model="ruleForm.phoneNum"></el-input>
                                        </el-form-item>
                                    </div></el-col>
                                    <el-col :span="7"><div class="grid-content bg-purple">
                                        <el-form-item label="就餐人数" prop="dinersCount">
                                            <el-input-number v-model="ruleForm.dinersCount" :min="1" :max="10" label="描述文字" size="small"></el-input-number>
                                        </el-form-item>
                                    </div></el-col>
                                    <el-col :span="3"><div class="grid-content bg-purple">
                                        <el-form-item>
                                            <el-button type="primary" @click="submitForm('ruleForm')">取号</el-button>
                                        </el-form-item>
                                    </div></el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div></el-col>
                </el-row>
            </el-row>

            <!--叫号-->
            <el-row :gutter="6" v-if="isNum == false">
                <el-row>
                    <el-col :span="12" style="padding:0px 30px 10px 30px;border-right:1px solid #EBEEF5"><div class="grid-content bg-purple">
                        <div class="table-type">
                            <table class="table" style="width: 32rem;">
                                <tr v-for="item in tableTypes">
                                    <td width="80"><img src="../../assets/imgs/ia_100000824.png" class="news-face"/></td>
                                    <td width="80">
                                        <div>{{item.name}}</div>
                                        <div>1-{{item.diners}}人</div>
                                    </td>
                                    <td>
                                        <el-button  plain v-for="arr in arranging" v-if="item.id == arr.typeId && arr.state == '等待'" :type="arr.id == currNum.id?'warning':''"
                                                    @click="butNum(arr)">{{arr.id}}</el-button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <p style="float: left"><span style="color: #E6A23C;">叫号</span>记录</p>
                            <el-col :span="24">
                                <el-card shadow="never" id="turn">
                                    <span v-for="arr in arranging" v-if="arr.state != '等待'" id="info">号码:{{arr.id}}</span>
                                </el-card>
                            </el-col>
                        </div>
                    </div></el-col>
                    <el-col :span="12" style="padding:30px 30px"><div class="grid-content bg-purple-light">
                        <div >
                            <div style="margin-bottom: 100px" >
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="16"><div class="grid-content bg-purple" style="font-size: 20px; font-weight: bold">
                                        <span>当前时间：<span></span>{{time}}</span>
                                    </div></el-col>
                                    <el-col :span="8"><div class="grid-content bg-purple">
                                        <span style="color: #999">休业时间：</span><span>{{operation.closedTime}}</span>
                                    </div></el-col>
                                </el-row>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>所在门店：</span>
                                    </div></el-col>
                                    <el-col :span="12"><div class="grid-content bg-purple">
                                        <span>{{operation.stores}}</span>
                                    </div></el-col>
                                </el-row>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>当前操作人：</span>
                                    </div></el-col>
                                    <el-col :span="12"><div class="grid-content bg-purple">
                                        {{operation.people}}
                                    </div></el-col>
                                </el-row>
                            </div>
                            <div>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>呼叫号：</span>
                                    </div></el-col>
                                    <el-col :span="12"><div class="grid-content bg-purple">
                                        <span style="font-size: 160%;color: #feab2d;">{{currNum.id}} {{currNum.phoneNum}}</span>
                                    </div></el-col>
                                </el-row>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>用餐人数：</span>
                                    </div></el-col>
                                    <el-col :span="12"><div class="grid-content bg-purple">
                                        <span style="font-size: 160%;color: #feab2d;">{{currNum.dinersCount}}</span>
                                        <span>人</span>
                                    </div></el-col>
                                </el-row>
                                <el-row :gutter="20" class="operation-admin">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <span>等待时间：</span>
                                    </div></el-col>
                                    <el-col :span="12"><div class="grid-content bg-purple">
                                        <span>{{currNum.time}}</span>
                                        <span>分钟</span>
                                    </div></el-col>
                                </el-row>
                            </div>
                        </div>
                        <div style="padding-top:10px;border-top:1px solid #EBEEF5">
                            <el-button type="warning">叫号</el-button>
                            <el-button type="success" @click="removeNum()">消号</el-button>
                            <el-button type="danger" @click="passNum()">过号</el-button>
                        </div>
                    </div></el-col>
                </el-row>
            </el-row>
        </el-main>
    </div>
    <!--<el-card class="box-card">
        <div class="text item" style="width: 100%">

        </div>
    </el-card>-->
</template>


<style>
    .operation-admin{
        margin-bottom: 30px;
    }
</style>

<script>
    import axios_vue from 'axios'
    //axios_vue.defaults.headers.post['Content-type']='application/json;charset=UTF-8';
    Date.prototype.format=function(fmt){
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "H+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
    export default {
        name: "RowNumber",
        data() {
            return {
                operation: {
                    stores:'大饭店',
                    closedTime:'18:00',
                },
                test:{},

                /*餐桌类型*/
                tableTypes:[],
                ruleForm: {
                    phoneNum: '',
                    dinersCount: '',
                    typeId:2,
                },
                /*取号用到的数据*/
                fetchData:[],/*{
                    a:{
                        /!*等候桌数*!/
                        waitingTable:2,
                        /!*等候时间*!/
                        waitingTime:300,
                        currNum:'004'
                    }
                },*/

                /*排号列表*/
                arranging:[],
                /*当前排号*/
                currNum:{
                    phoneNum: '0',
                    dinersCount: '0',
                    typeId:-1,
                    time:'0'

                },

                time:'',
                isNum: true,
                rules: {
                    phoneNum: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 7, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
                    ],
                    dinersCount: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ]
                }
            };
        },
        methods: {
            /*新增排号*/
            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.ruleForm.takeDate = new Date().format("yyyy-MM-dd");
                        _this.ruleForm.typeId = _this.test.id;
                        _this.ruleForm.takeTime = new Date().format("HH:mm:ss");
                        axios_vue.post('arranging/save',_this.ruleForm)
                            .then(function (response) {
                                _this.$refs[formName].resetFields();
                                _this.request();
                                _this.$notify({
                                    title: '成功',
                                    message: '',
                                    type: 'success'
                                });
                            })
                            .catch(function (error) {
                                console.log(error);
                            });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            butNum(num){
                this.currNum = num;
                this.currNum.time = this.timeDifference(num.takeTime,new Date().format("HH:mm:ss"));
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            fetchNum(){
                this.isNum = true;
                this.request();
            },
            /*叫号*/
            cryNum(){
                this.isNum = false;
                let _this = this;
                axios_vue.post('arranging/show')
                    .then(function (response) {
                        _this.arranging = response.data;
                        for(let i = 0; i < response.data.length; i++){
                            if(response.data.state == '等待'){
                                _this.currNum = response.data[i];
                                console.log(_this.currNum);
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            /*消号操作*/
            removeNum(){
                let _this = this;
                this.currNum.state = '消号';
                axios_vue.post('arranging/update',this.currNum)
                    .then(function (response) {
                        _this.arranging = response.data;
                        _this.currNum={};
                        for(let i = 0; i < response.data.length; i++){
                            if(response.data.state == '等待'){
                                _this.currNum = response.data[i];
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            passNum(){
                let _this = this;
                this.currNum.state = '过号';
                axios_vue.post('arranging/remove/'+this.currNum.id)
                    .then(function (response) {
                        _this.arranging = response.data;
                        _this.currNum={};
                        for(let i = 0; i < response.data.length; i++){
                            if(response.data.state == '等待'){
                                _this.currNum = response.data[i];
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            request(){
                let _this = this;
                this.$axios.post('diningTable/tables', this.condition)
                    .then(function (response) {
                        _this.tableTypes=[];
                        _this.tableTypes = response.data;
                        _this.test = _this.tableTypes[0];
                        console.log(_this.tableTypes);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            /*计算时间差值*/
            timeDifference(stratTime,endTime){
                let start1=stratTime.split(":");
                let startAll=parseInt(start1[0]*60)+parseInt(start1[1]);

                let end1=endTime.split(":");
                let endAll=parseInt(end1[0]*60)+parseInt(end1[1]);
                return endAll - startAll;
            }
        },
        mounted(){
            let _this = this;
            setInterval(function(){
                let tmeptime = new Date().format("yyyy/MM/dd HH:mm:ss");
                _this.time = tmeptime;
            }, 1000);
        },
        created() {
            this.request();
        }
    }
</script>

<style scoped>
    @import "../../css/PublicCashier.css";
    @import "../../css/Order.css";
    @import "../../css/rowNumber.css";
</style>
